﻿
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flying Text</title>
<script type src="http://code.jquery.com/jquery-1.7.1.min.js" language="javascript"></script>
<script type>
    $(document).ready(function () {

        $('.container .flying-text').css({ opacity: 0 });
        $('.container .active-text').animate({ opacity: 1, marginLeft: "250px" }, 4000);

        var int = setInterval(changeText, 5000);


        function changeText() {

            var $activeText = $(".container .active-text");

            var $nextText = $activeText.next();
            if ($activeText.next().length == 0) $nextText = $('.container .flying-text:first');

            $activeText.animate({ opacity: 0 }, 1000);
            $activeText.animate({ marginLeft: "-25px" });

            $nextText.css({ opacity: 0 }).addClass('active-text').animate({ opacity: 1, marginLeft: "250px" }, 4000, function () {

                $activeText.removeClass('active-text');
            });
        }
    });
</script>

<style type="text/css">
body{
background-color:#420b3a;
}

.container{
background-color:#420b3a;
width:400px;
margin:0 auto;
color:#FFF;
overflow:hidden;
}

.flying-text{
margin-left:-50px;
}

</style>

</head>

<body>

<div class="container">
    <h3 class="flying-text active-text">iUCN</h3>
    <h3 class="flying-text">Developed by</h3>
    <h3 class="flying-text">Dan Danielsen</h3> 
    <h3 class="flying-text">Leyth Hisham</h3> 
    <h3 class="flying-text">Lasse Bianco</h3> 
    <h3 class="flying-text">Christian Gartner</h3>     
    
</div>

</body>
</html>